<template>
    <el-menu :ellipsis="ellipsis" v-bind="$attrs">
        <BaseMenuItem v-for="menu of data" :key="menu.id" :data="menu" />
    </el-menu>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseMenu
 * @Description 菜单列表
 * @Author xuyizhuo
 * @Date 2024/7/5 9:56
 */
import type { BaseMenuData } from './BaseMenuType'
import BaseMenuItem from './BaseMenuItem.vue'

interface BaseMenuProps {
    data: BaseMenuData[]
    ellipsis: boolean
}

defineProps<BaseMenuProps>()
</script>

<style lang="scss" scoped>
// .el-menu {
//     transition: all 0.3s;
//     --horizontal-hover-color: unset;
//     --horizontal-hover-color-text: unset;
//
//     // 水平菜单
//     &.el-menu--horizontal {
//         border-bottom: 1px solid var(--base-border-color);
//         display: flex;
//         gap: 20px;
//
//         // 多级菜单
//         :deep(.el-sub-menu) {
//             &.is-active {
//                 .el-sub-menu__title {
//                     color: #30333a !important;
//                 }
//             }
//
//             .el-sub-menu__title {
//                 height: 40px;
//                 padding-left: 8px;
//                 padding-right: 30px;
//                 color: #909399;
//                 font-size: 16px;
//                 font-weight: normal;
//                 line-height: 24px;
//
//                 .el-sub-menu__icon-arrow {
//                     right: 8px;
//                 }
//
//                 &:hover {
//                     background-color: var(--horizontal-hover-color);
//                 }
//             }
//         }
//
//         // 单级菜单
//         :deep(.el-menu-item) {
//             --el-bg-color-overlay: var(--horizontal-hover-color);
//             padding: 8px;
//             height: 40px;
//             color: #909399;
//             font-size: 16px;
//             font-weight: normal;
//             line-height: 24px;
//
//             &.is-active {
//                 color: #30333a !important;
//             }
//
//             &:not(.is-disabled):focus {
//                 background: var(--horizontal-hover-color);
//             }
//
//             &:hover {
//                 background: var(--horizontal-hover-color);
//                 cursor: pointer;
//             }
//         }
//     }
//
//     // // 菜单收起
//     // &.el-menu--collapse {
//     //     width: unset;
//     // }
//
//     // .el-menu-item {
//     //     height: 40px;
//     //     line-height: 40px;
//     //     border-radius: 4px;
//     //     // color: var(--base-text-color);
//     //     // font-size: 16px;
//     //
//     //     & > .el-menu-tooltip__trigger {
//     //         display: flex;
//     //         text-align: center;
//     //         justify-content: center;
//     //         padding: 0;
//     //     }
//     //
//     //     &:hover {
//     //         background: var(--base-color-hover);
//     //         color: var(--base-text-color-hover);
//     //         cursor: pointer;
//     //     }
//     //
//     //     span {
//     //         margin-left: 12px;
//     //     }
//     // }
//
//     // .is-active {
//     //     background: var(--base-primary-color);
//     //     color: var(--base-text-primary-color);
//     //
//     //     &:hover {
//     //         background: var(--base-primary-color);
//     //         color: var(--base-text-primary-color);
//     //         opacity: 0.8;
//     //     }
//     // }
// }
</style>
